<template>
	<view class="content">
		<view class="u-page">
			<view class="u-demo-block">
				<u--form labelPosition="left" :model="formData" ref="form1" labelWidth="80">
					<u-form-item label="门店logo" prop="fileList1" borderBottom ref="item1">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item label="门店名称" prop="name" borderBottom ref="item1">
						<u--input v-model="formData.name" border="none" placeholder="输入门店名称"></u--input>
					</u-form-item>
					<u-form-item label="联系方式" prop="mobile" borderBottom ref="item1">
						<u--input v-model="formData.mobile" border="none" placeholder="输入联系方式"></u--input>
					</u-form-item>
					<u-form-item label="门店位置" prop="address" borderBottom ref="item1" @click="btnAddress">
						<u--input v-model="formData.address" disabled disabledColor="#ffffff" border="none"
							placeholder="门店地址"></u--input>
						<u-icon slot="right" name="map"></u-icon>
					</u-form-item>
					<u-form-item label="主营业务"></u-form-item>
					<view class="checkbox">
						<u-checkbox-group v-model="checkboxValue" placement="row" @change="checkboxChange">
							<view class="checkbox-item">
								<u-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name"
									:name="item.name" shape="circle" placement="column">
								</u-checkbox>
							</view>
						</u-checkbox-group>
					</view>
					<u-form-item label="公司简介" prop="intro" borderBottom ref="item1">
						<u--textarea placeholder="请输入公司简介" v-model="formData.intro" count></u--textarea>
					</u-form-item>
					<view class="imge">
						<text style="margin-bottom: 20rpx;">门店图片</text>
						<text style="color: #BBBCBE;font-size: 12px;">为保证显示效果，建议上传3张以上图片</text>
						<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
							:maxCount="10"></u-upload>
					</view>
					<view class="license">
						<text style="margin-bottom: 20rpx;">营业执照</text>
						<text style="color: #BBBCBE;font-size: 12px;">（选填）</text>
						<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
							:maxCount="10"></u-upload>
					</view>
					<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
				</u--form>

			</view>
		</view>
		<u-overlay :show="showModel" @click="showModel = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image src="/static/money.png" mode="" class="rect_bg" @click="btnConfirm"></image>
					<text class="left" @click="btnConfirm">发布会员</text>
					<text class="right" @click="btnConfirm">浏览会员</text>
					<image src="/static/close.png" mode="" class="rect-close" @click="showModel = false"></image>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				fileList1: [],
				fileList2: [],
				fileList3: [],
				formData: {
					name: '',
					mobile: '',
					address: '',
					address_lat: '',
					address_lng: '',
					intro: ''
				},
				checkboxValue: [],
				checkboxList: [{
						name: '房产中介',
						disabled: false
					},
					{
						name: '装修',
						disabled: false
					},
					{
						name: '家政',
						disabled: true
					},
					{
						name: '建筑销售',
						disabled: true
					},
					{
						name: '品牌家居',
						disabled: true
					},
					{
						name: '灯饰卫浴',
						disabled: true
					},
					{
						name: '家具家电',
						disabled: true
					},
					{
						name: '开发商',
						disabled: true
					}
				],
				textarea: '',
				showModel:false
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this[`fileList${event.name}`][fileListLen]
					const data = JSON.parse(result);
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: data.data.path
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this;
				const app = getApp().globalData.base_url;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: app + '&map=applet_img_upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						success: (res) => {
							console.log(res.data)
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			checkboxChange(n) {
				this.checkboxValue = n;
				console.log(this.checkboxValue)
			},
			btnAddress() {
				let that = this;
			
				uni.chooseLocation({
					success(res) {
						that.formData.address = res.address;
						that.formData.address_lat = res.latitude;
						that.formData.address_lng = res.longitude;
					}
				})
			},
			submit() {
				// map	是	string	类型 applet_business_add
				// title	是	string	门店名称
				// logo	是	string	昵称
				// mobile	是	string	联系方式
				// address	是	string	地址名称
				// address_lat	是	string	纬度
				// address_lng	是	string	纬度
				// type	是	string	主营业务
				// mark	是	string	公司简介
				// pic	否	string	营业执照
				// pic_imgs	否	string	门店图片

				let that = this;
				this.http("applet_business_add", {
					title: that.formData.name,
					logo: that.fileList1,
					mobile: that.formData.mobile,
					address:that.formData.address,
					address_lat:that.formData.address_lat,
					address_lng:that.formData.address_lng,
					type:that.checkboxValue,
					mark:that.formData.intro,
					pic:that.fileList2,
					pic_imgs:that.fileList3
				}).then(ret=>{
					console.log(ret)
					if (ret.ec == 999) {
						console.log("提示错误")
						that.showModel = true
						that.content = ret.em
						return false;
					}
					if(ret.ec == 200){
						uni.showToast({
							title:"等待审核",
							icon:"success",
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 523upx;
		height: 502upx;
		position: relative;
	
		.rect_bg {
			width: 100%;
			height: 100%;
		}
	
		.left {
			position: absolute;
			bottom: 30rpx;
			left: 65rpx;
			color: #fff;
			font-size: 28rpx;
		}
	
		.right {
			position: absolute;
			bottom: 30rpx;
			right: 75rpx;
			color: #fff;
			font-size: 28rpx;
		}
	
		.rect-close {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 65rpx;
			right: 19rpx;
		}
	}
	.u-page {
		width: 94%;
		margin: 0 auto;
	}

	.u-demo-block__title {
		width: 100%;
		display: flex;
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #888;
	}

	.block_title {
		border-top: 20rpx solid #f8f8f8;
	}

	.input_inline {
		width: 33%;
	}

	.checkbox {
		margin-top: 20upx;

		.checkbox-item {
			height: 250rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}
	}

	.u-textarea--radius.data-v-09988a29 {
		margin-top: 10rpx;
	}

	.imge {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		height: 340rpx;
		border-bottom: 1px solid #BBBCBE;
		margin-top: 10rpx;
	}

	.license {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		height: 340rpx;
		margin-bottom: 50rpx;
		margin-top: 10rpx;
	}
</style>
